<script setup>
import { ref, reactive } from "vue";
import { Calendar, Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
import "./trends.css";
import Newtrends from "./newtrends.vue";
import Nearby from "./nearby.vue";
const input4 = ref("");
const gotosearch = () => {
  router.push({
    path: "/search",
  });
};
const show1 = ref(true);
const show2 = ref(false);

const funshow2 = () => {
  show1.value = false;
  show2.value = true;
};
const funshow1 = () => {
  show1.value = true;
  show2.value = false;
};
</script>

<template>
  <div className="trends-all">
    <div className="trends-search">
      <van-cell-group inset>
        <van-field
          style="width: 100%; background-color: #f7f7f7"
          left-icon="search"
          placeholder="请输入关键词"
          @click="gotosearch"
        />
      </van-cell-group>
      <div className="trends-fourimg">
        <img src="../../../imgs/3.png" alt="" />
        <div class="image-text1">#每日打卡#</div>
        <img src="../../../imgs/2.png" alt="" />
        <div class="image-text2">#运动健身#</div>
        <img src="../../../imgs/1.png" alt="" />
        <div class="image-text3">#校园夜跑#</div>
        <img src="../../../imgs/4.png" alt="" />
        <div class="image-text4">#释放压力#</div>
      </div>
    </div>
    <div className="new-trends">
      <div className="new-trends-title">
        <span
          @click="funshow1()"
          :style="{
            fontSize: show2 ? '14px' : '17px',
            color: show2 ? '#999999' : 'black',
          }"
        >
          最新状态</span
        >
        <span
          @click="funshow2()"
          :style="{
            fontSize: show1 ? '14px' : '20px',
            color: show1 ? '#999999' : 'black',
          }"
        >
          附近状态</span
        >
      </div>
      <div className="new-trends-center">
        <Newtrends v-if="show1" />
        <Nearby v-if="show2" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
